<template>
  <div>
    <el-tooltip
      class="item"
      effect="dark"
      content="点击展示所有事件"
      placement="top"
    >
      <s-title text="事件动态" @stitleClick="alleventhandle"></s-title>
    </el-tooltip>
    <div class="head">
      <div class="head-top">
        <div class="head-top-box" v-for="(item, index) in headT" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
      <div class="head-bottom">
        <div
          class="head-bottom-box"
          v-for="(item, index) in headB"
          :key="index"
        >
          <el-tooltip
            class="item"
            effect="dark"
            content="点击筛选事件信息"
            placement="top"
          >
            <div @click="eventfilter(index, item.name)">
              <span class="head-bottom-text">{{ item.name }}</span>
              <span class="head-bottom-value">{{ item.value }}</span>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%" height="260" ref="table">
        <el-table-column prop="icon" label="来源" width="60">
          <template slot-scope="scope">
            <img class="icon-img" :src="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="290"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="time" width="160" label="发现时间">
        </el-table-column>
        <el-table-column
          prop="statusname"
          width="80"
          label="状态"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="footer-box" v-for="(item, index) in footer" :key="index">
        <img class="footer-content-bg" :src="item.Img1" />
        <div class="footer-content-value">{{ item.value }}</div>
        <div class="footer-content-lable">{{ item.name }}</div>
      </div>
    </div>
    <div class="footer-arrow">
      <div class="footer-arrow-box" v-for="(item, index) in arrow" :key="index">
        <img class="footer-arrow-icon" :src="item" />
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import common from "../../../assets/common";
import {
  eventcount,
  eventlist1,
  eventlist2,
  AIeventount,
  geteventtf,
  geteventdetail,
} from "../../../utils/api";
export default {
  name: "eventDynamic",
  components: {
    sTitle,
  },
  data() {
    return {
      headT: [
        require("@/assets/image/left2/transport.png"),
        require("@/assets/image/left2/Hotline.png"),
        // require("@/assets/image/left2/zhxt.png"),
        require("@/assets/image/left2/tf.png"),
        require("@/assets/image/left2/AI.png"),
        // require("@/assets/image/left2/Internet.png"),
      ],
      headB: [
        { name: "城运", value: 0 },
        { name: "热线", value: 0 },
        // { name: "综合协同", value: 0 },
        { name: "突发", value: 0 },
        { name: "AI", value: 0 },
        // { name: "物联网", value: 0 },
      ],
      tableData: [],
      footer: [
        { name: "受理立案", value:'91', Img1: require("@/assets/image/left2/accept.png") },
        { name: "派遣", value:'6', Img1: require("@/assets/image/left2/dispatch.png") },
        { name: "处理", value:'27', Img1: require("@/assets/image/left2/manage.png") },
        { name: "核查", value:'15', Img1: require("@/assets/image/left2/check.png") },
        { name: "结案", value:'43', Img1: require("@/assets/image/left2/end.png") },
      ],
      arrow: [
        require("@/assets/image/left2/arrow.png"),
        require("@/assets/image/left2/arrow.png"),
        require("@/assets/image/left2/arrow.png"),
        require("@/assets/image/left2/arrow.png"),
      ],
    };
  },
  created() {},
  mounted() {
    let param = {
      streetname: "豫园街道",
      date: "当月",
    };
    eventcount(JSON.stringify(param)).then((res) => {
      if (res.data.code === 200) {
        this.headB[1].value = res.data.data.result[0].count;
      }
    });

    let param2 = {
      streetCode: "JD05",
      startTime: tedp.getBeforeDate(29),
      endTime: tedp.date2String_OnlyDate(new Date()),
    };
    AIeventount(JSON.stringify(param2)).then((res) => {
      if (res.data.code === 200) {
        // this.headB[4].value = res.data.data[0].aiAmount;
        this.headB[2].value = res.data.data[0].fastAmount;
      }
    });

    geteventtf(
      JSON.stringify({
        streetName: "豫园街道办事处",
        startTime: tedp.getBeforeDate(29),
        endTime: tedp.date2String_OnlyDate(new Date()),
      })
    ).then((res) => {
      if (res.data.code === 200) {
        this.headB[3].value = res.data.data.count;
      }
    });

    this.getAllevent();
    common.tableScroll(this.$refs.table);
  },
  methods: {
    eventfilter(i, item) {
      //AI
      if (i === 4 || i === 2) {
        let type = i === 4 ? 1 : 2;
        eventlist2(
          JSON.stringify({
            streetCode: "JD05",
            startTime: tedp.getBeforeDate(29),
            endTime: tedp.date2String_OnlyDate(new Date()),
            eventType: type,
            pageNum: 1,
            pageSize: 30,
          })
        ).then((res) => {
          if (res.data.code === 200) {
            let rdata = res.data.data.data;
            this.tableData = [];
            this.arrangedata(rdata);
          } else {
            this.$message({
              message: res.data.message,
              type: "warning",
            });
          }
        });
      } else if (i === 0 || i === 1 || i === 5) {
        eventlist1(
          JSON.stringify({
            streetname: "豫园街道",
          })
        ).then((res) => {
          if (res.data.code === 200) {
            let list = res.data.data.result;
            this.tableData = [];
            let _arr = [];
            for (let k = 0, z = list.length; k < z; k++) {
              if (item === list[k].source) {
                _arr.push(list[k]);
              }
            }
            this.arrangedata(_arr);
          }
        });
      } else {
        geteventdetail(
          JSON.stringify({
            streetName: "豫园街道办事处",
            startTime: tedp.getBeforeDate(29),
            endTime: tedp.date2String_OnlyDate(new Date()),
            pageSize: 30,
            currPage: 1,
          })
        ).then((res) => {
          if (res.status === 200) {
            this.tableData = [];
            let list = res.data.data.list;
            this.arrangedata(list, "突发");
          }
        });
      }
    },
    getStatus(state) {
      return state === 101
        ? "签收"
        : state === 201
        ? "响应"
        : state === 301
        ? "到达"
        : state === 401
        ? "处置"
        : state === 501
        ? "完结"
        : state === 10
        ? "初审通过"
        : "二审通过";
    },
    arrangedata(data, type) {
      for (let i = 0, l = data.length; i < l; i++) {
        let obj = {
          description:
            data[i].describe ||
            data[i].description ||
            data[i].eventDesc ||
            "--",
          time:
            (data[i].happenTime && data[i].happenTime.split(" ")[0]) ||
            (data[i].time && data[i].time.split(" ")[0]) ||
            (data[i].eventTime && data[i].eventTime.split(" ")[0]),
          statusname:
            data[i].currentState ||
            data[i].statusname ||
            this.getStatus(data[i].eventStatus) ||
            "--",
        };
        if (type) {
          data[i].dataSource = type;
        }
        switch (data[i].dataSource || data[i].source) {
          case "热线":
            obj.icon = require("@/assets/image/left2/Hotline.png");
            break;
          case "城运":
            obj.icon = require("@/assets/image/left2/transport.png");
            break;
          // case "综合协同":
          //   obj.icon = require("@/assets/image/left2/zhxt.png");
          //   break;
          case "突发":
            obj.icon = require("@/assets/image/left2/tf.png");
            break;
          case "其他":
            obj.icon = require("@/assets/image/left2/AI.png");
            break;
          case "AI":
            obj.icon = require("@/assets/image/left2/AI.png");
            break;
          // case "物联网":
          //   obj.icon = require("@/assets/image/left2/Internet.png");
          //   break;
        }
        this.tableData.push(obj);
      }
    },
    alleventhandle() {
      this.tableData = [];
      this.getAllevent();
    },
    getAllevent() {
      let param1 = {
        streetname: "豫园街道",
      };
      eventlist1(JSON.stringify(param1)).then((res) => {
        if (res.data.code === 200) {
          let list = res.data.data.result;
          this.arrangedata(list);
        }
      });
      let param2 = {
        streetCode: "JD05",
        startTime: tedp.getBeforeDate(29),
        endTime: tedp.date2String_OnlyDate(new Date()),
        eventType: 0,
        pageNum: 1,
        pageSize: 30,
      };
      eventlist2(JSON.stringify(param2)).then((res) => {
        if (res.data.code === 200) {
          let rdata = res.data.data.data;
          this.arrangedata(rdata);
        }
      });
      geteventdetail(
        JSON.stringify({
          streetName: "豫园街道办事处",
          startTime: tedp.getBeforeDate(29),
          endTime: tedp.date2String_OnlyDate(new Date()),
          pageSize: 30,
          currPage: 1,
        })
      ).then((res) => {
        if (res.status === 200) {
          let list = res.data.data.list;
          this.arrangedata(list, "突发");
        }
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 530px;
  height: 135px;
  margin: auto;
}
.head-top {
  width: 530px;
  height: 35px;
  display: flex;
  justify-content: space-around;
}
.head-top-box {
  width: 40px;
  height: 35px;
}
.head-top-box img {
  width: 100%;
  height: 100%;
}
/* 6个球 */
.head-bottom {
  width: 530px;
  height: 90px;
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}
@keyframes myfirstd1 {
    0%{
        margin-top: 0;
    }
    40%{
        margin-top:20px;
    }
    100%{
        margin-top: 0;
    }
}
.head-bottom-box {
  width: 66px;
  height: 66px;
  background-image: url("../../../assets/image/left2/hasData.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

}
.head-bottom-box:nth-child(1) {
  margin-top: 20px;
  animation:myfirstd1 3s linear 0s infinite ;
}
.head-bottom-box:nth-child(2) {
  animation:myfirstd1 3s linear 1s infinite ;
}
.head-bottom-box:nth-child(3) {
  animation:myfirstd1 3s linear 0s infinite ;
}
.head-bottom-box:nth-child(4) {
  margin-top: 10px;
  animation:myfirstd1 3s linear 1s infinite ;
  /* animation:myfirstd1 linear infinite 2s; */
  /* background-image: url("../../../assets/image/left2/unData.png"); */
}
.head-bottom-box:nth-child(5) {
  margin-top: 20px;
  animation:myfirstd1 3s linear 2s infinite ;
}
.head-bottom-box:nth-child(6) {
  margin-top: 20px;
  animation:myfirstd1 3s linear 0s infinite ;
}
.head-bottom-text {
  margin-top: 14px;
  display: inline-block;
  width: 100%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.head-bottom-value {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fedc85;
  text-align: center;
}
.content {
  width: 595px;
  height: 275px;
  margin: auto;
}
.footer-arrow {
  width: 42px;
  height: 30px;
}
.icon-img {
  width: 25px;
  height: 100%;
}
.footer {
  width: 520px;
  height: 105px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.footer-box {
  width: 70px;
  /* height: 80px; */
  height: 105px;
}
/* .footer-content {
  width: 70px;
  height: 80px;
} */
.footer-box:nth-child(1) .footer-content-lable {
  background-image: url("../../../assets/image/left2/accept-b.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.footer-box:nth-child(2) .footer-content-lable {
  background-image: url("../../../assets/image/left2/dispatch-b.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.footer-box:nth-child(3) .footer-content-lable {
  background-image: url("../../../assets/image/left2/manage-b.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.footer-box:nth-child(4) .footer-content-lable {
  background-image: url("../../../assets/image/left2/check-b.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.footer-box:nth-child(5) .footer-content-lable {
  background-image: url("../../../assets/image/left2/end-b.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.footer-content-bg {
  width: 57px;
  height: 57px;
  margin-left: 6px;
}
.footer-content-value {
  width: 70px;
  height: 23px;
  font-size: 9px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 23px;
}
.footer-content-lable {
  width: 70px;
  height: 23px;
  font-size: 9px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 23px;
}
.footer-arrow {
  width: 520px;
  height: 30px;
  display: flex;
}
.footer-arrow-box {
  width: 42px;
  height: 100%;
  overflow: hidden;
}
.footer-arrow-icon {
  width: 42px;
  height: 30px;
}
@keyframes move1 {
    0%{ transform: translateX(0);}
    20%{ transform: translateX(42px);}
    100%{ transform: translateX( 42px);}
}
@keyframes move2 {
    0%{ transform: translateX( 0);}
    40%{ transform: translateX( 42px);}
    100%{ transform: translateX( 42px);}
}
@keyframes move3 {
    0%{ transform: translateX( 0);}
    60%{ transform: translateX( 42px);}
    100%{ transform: translateX( 42px);}
}
@keyframes move4 {
    0%{ transform: translateX( 0);}
    80%{ transform: translateX( 42px);}
    100%{ transform: translateX( 42px);}
}
.footer-arrow-box:nth-child(1) {
  position: relative;
  bottom: 70px;
  left: 122px;
  /* left: 80px; */
  /* animation: move 3s linear infinite; */
}
.footer-arrow-box:nth-child(1) img{
  position: absolute;
  left: -42px;
  animation: move1 3s linear infinite;
}
.footer-arrow-box:nth-child(2) {
  position: relative;
  bottom: 70px;
  left: 194px;
}
.footer-arrow-box:nth-child(2) img{
  position: absolute;
  left: -42px;
  animation: move2 3s linear infinite;
}
.footer-arrow-box:nth-child(3) {
  position: relative;
  bottom: 70px;
  left: 262px;
}
.footer-arrow-box:nth-child(3) img{
  position: absolute;
  left: -42px;
  animation: move3 3s linear infinite;
}
.footer-arrow-box:nth-child(4) {
  position: relative;
  bottom: 70px;
  left: 334px;
}
.footer-arrow-box:nth-child(4) img{
  position: absolute;
  left: -42px;
  animation: move4 3s linear infinite;
}
</style>
